<script lang="ts" setup>
import { ref, onMounted, nextTick, defineEmits } from 'vue'
import { ElMessage } from 'element-plus'
import sjyglService from '@/api/sjygl'
import swxTree from '@/components/edit-tree/src/index.vue'
import TreeUtil from '@/utils/tree'
import { SjyfzQueryResult, SjyfzDeleteInputDTO, SjyfzSaveInputDTO } from '@/api/sjygl-dto'
// 入参
const emit = defineEmits(['initData'])
// 生命周期
onMounted(() => {
  // 获取树
  getTreeData()
})

// 数据源分组
const treeData = ref<SjyfzQueryResult[]>([])
// 树形控件配置选项
const treeProps = ref({
  children: 'children',
  label: 'sjyfzmc',
})
// 树节点模板
const nodeTemplate = ref({
  sjyfzbh: '',
  sjyfzfbh: '',
  sjyfzmc: '',
  gzkjbm: '',
  xh: '',
})
// 记录当前节点，方便回显
const currentNode = ref<SjyfzQueryResult>({
  sjyfzbh: '',
  sjyfzfbh: '',
  sjyfzmc: '',
  gzkjbm: '',
  xh: '',
})
const swxTreeRef = ref()
/*
 * 获取分组树
 */
const getTreeData = () => {
  sjyglService
    .querySjyfz()
    .then((res) => {
      // 把数据源转成树形结构数据
      treeData.value = TreeUtil.getTreeData(res.data, 'sjyfzbh', 'sjyfzfbh')
      if (res.data.length) {
        let sjyfzbh = currentNode.value.sjyfzbh
        // 如果是原本有节点，默认选择当前节点，如果没有选中第一个
        if (sjyfzbh) {
          nodeClick(currentNode.value)
        } else {
          nodeClick(treeData.value[0])
          sjyfzbh = treeData.value[0].sjyfzbh
        }
        nextTick(() => {
          // 高亮节点
          swxTreeRef.value.setCurrentKey(sjyfzbh)
        })
      }
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
}

/*
 * 保存节点
 */
const saveData = (data: SjyfzSaveInputDTO) => {
  let params = data
  if (data.sjyfzbh.startsWith('empty')) {
    params.sjyfzbh = ''
  }
  sjyglService
    .saveSjyfz(params)
    .then(() => {
      getTreeData()
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
}
/*
新增分组
*/
const addTree = () => {
  swxTreeRef.value.addMl()
}

/*
 * 删除节点
 */
const deleteNode = (data: SjyfzDeleteInputDTO) => {
  const params = {
    sjyfzbh: data.sjyfzbh,
  }
  sjyglService
    .deleteSjyfz(params)
    .then(() => {
      // 如果删除的是当前节点，删除当前记录节点
      if (currentNode.value.sjyfzbh === data.sjyfzbh) {
        currentNode.value.sjyfzbh = ''
      }
      ElMessage.success('删除成功')
      getTreeData()
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
}

/*
 * 点击节点
 */
const nodeClick = (data: SjyfzQueryResult) => {
  currentNode.value = { ...data }
  emit('initData', data)
}
defineExpose({ addTree })
</script>
<template>
  <div class="container">
    <swxTree
      :treeData="treeData"
      :treeProps="treeProps"
      :nodeKey="'sjyfzbh'"
      :nodeTemplate="nodeTemplate"
      parentNodeKey="sjyfzfbh"
      @deleteTreeNode="deleteNode"
      @saveTreeData="saveData"
      @treeNodeClick="nodeClick"
      @cancelNodeChange="getTreeData"
      ref="swxTreeRef"
    />
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  overflow: auto;
}
</style>
